/* 侧边导航栏样式 */
.navigation-sidebar-component {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.navigation-sidebar-component .sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 折叠面板样式 - IDEA编辑器风格 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse) {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--n-card-color);
  border-radius: 0; /* 扁平化设计，移除圆角 */
  padding: 0; /* 移除内边距，更紧凑 */
  gap: 0; /* 移除间隙，增强隔离感 */
  box-shadow: none; /* 移除阴影 */
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item) {
  display: flex;
  flex-direction: column;
  border: none; /* 移除边框，扁平化设计 */
  border-radius: 0; /* 扁平化设计，移除圆角 */
  overflow: hidden;
  --n-item-margin: 0;
  box-shadow: none; /* 移除阴影，扁平化设计 */
  border-top: 2px solid var(--n-divider-color); /* 增加顶部边框宽度，从1px增加到2px，使分割线更明显 */
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item:first-child) {
  border-top: none; /* 第一个面板不显示顶部边框 */
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item.n-collapse-item--active) {
  flex: 1;
}

/* 折叠面板头部动画 */
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item .n-collapse-item__header) {
  padding: 0px 12px; 
  background-color: var(--n-hover-color); /* 使用悬停背景色作为默认背景，提高可见性 */
  border: none; /* 移除边框，扁平化设计 */
  border-radius: 0; /* 扁平化设计，移除圆角 */
  border-bottom: 2px solid var(--n-divider-color); /* 增加底部边框宽度，从1px增加到2px，使分割线更明显 */
  font-weight: 500;
  font-size: 13px;
  min-height: 28px; /* 从32px减少到28px，进一步减小头部高度 */
  height: auto; /* 自动高度，适应内容 */
  line-height: 16px;
  flex-shrink: 0;
  margin-bottom: 0; /* 移除底部外边距 */
  transition: all 0.15s var(--n-bezier-ease-out); // 从0.2s减少到0.15s，更快速
  color: var(--n-text-color-2); /* 使用次要文本颜色，降低对比度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  position: relative; /* 为伪元素提供参考 */
  overflow: hidden; /* 确保伪元素不会溢出 */
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

/* 添加头部细微纹理效果，增强IDEA风格 */
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item .n-collapse-item__header::after) {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 20%, 
    rgba(255, 255, 255, 0.1) 80%, 
    transparent 100%);
  pointer-events: none; /* 确保不影响点击事件 */
}

/* 添加头部波纹效果 */
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item .n-collapse-item__header::before) {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s var(--n-bezier-ease-out);
  pointer-events: none; /* 确保不影响点击事件 */
}

.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item .n-collapse-item__header:hover::before) {
  left: 100%; /* 悬停时波纹从左到右移动 */
}

/* 激活状态的头部动画 */
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item.n-collapse-item--active .n-collapse-item__header) {
  background-color: var(--n-color-6);  
  color: var(--n-text-color-1); 
  transform: translateZ(0); 
  box-shadow: none; 
}

/* 激活状态头部细微纹理效果 */
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item.n-collapse-item--active .n-collapse-item__header::after) {
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(54, 173, 106, 0.2) 20%, 
    rgba(54, 173, 106, 0.2) 80%, 
    transparent 100%);
}

/* 折叠面板标题悬停效果 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item .n-collapse-item__header:hover) {
  background-color: var(--n-color-6); 
  color: var(--n-text-color-1); 
  transform: translateX(1px);
}

/* 悬停状态头部细微纹理效果 */
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse-item .n-collapse-item__header:hover::after) {
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 20%, 
    rgba(255, 255, 255, 0.2) 80%, 
    transparent 100%);
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item__content-wrapper) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-top: 0px;
  background-color: var(--n-card-color); /* 确保背景色与标题一致 */
  border-top: 1px solid var(--n-divider-color); /* 添加顶部边框，增强头部与内容的区分 */
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 0px;
  overflow: hidden;
  background-color: var(--n-card-color); /* 确保背景色与标题一致 */
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

.navigation-sidebar-component .collapse-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0; /* 移除内边距，更紧凑 */
  min-height: 0;
  overflow-y: auto;
  background-color: var(--n-card-color); /* 确保背景色与标题一致 */
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

/* 内容包装器样式 */
.navigation-sidebar-component .content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3px 6px; // 从4px 8px减少到3px 6px，更紧凑
  overflow: hidden;
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

/* 列表样式 */
.navigation-sidebar-component .chapter-list,
.navigation-sidebar-component .outline-list,
.navigation-sidebar-component .character-list,
.navigation-sidebar-component .settings-list,
.navigation-sidebar-component .inspiration-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 4px;
}

/* 空状态样式 */
.navigation-sidebar-component .n-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* 添加按钮容器样式 */
.navigation-sidebar-component .add-button-container {
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--divider-color);
}

// 统一的列表项样式 - Naive UI
.navigation-sidebar-component .sidebar-content :deep(.n-list-item) {
  padding: 6px 10px; // 从8px 12px减少到6px 10px，更紧凑
  cursor: pointer;
  transition: all 0.15s var(--n-bezier-ease-out); // 从0.2s减少到0.15s，更快速
  border-bottom: 1px solid #d0d0d8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px; // 从40px减少到32px，更紧凑
  position: relative; /* 为绝对定位提供参考 */
  overflow: hidden; /* 确保动画不会溢出 */
  transform: translateZ(0); /* 启用硬件加速 */
  animation: listItemEnter 0.15s var(--n-bezier-ease-out) forwards; // 从0.2s减少到0.15s，更快速
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    background-color: var(--hover-color, rgba(24, 160, 88, 0.1));
    transform: translateX(1px); // 从2px减少到1px，更微妙
  }
  
  &.n-list-item--selected {
    background-color: rgba(64, 158, 255, 0.15) !important; /* 淡蓝色背景 */
    color: inherit; // 保持文字颜色不变
    border-left: 3px solid var(--n-primary-color, #18a058) !important; /* 添加左侧边框突出选中状态 */
    padding-left: 7px; // 调整内边距以适应左侧边框，从9px减少到7px
    animation: listItemSelect 0.15s var(--n-bezier-ease-out) forwards; // 从0.2s减少到0.15s，更快速
  }
  
  .item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px; /* 添加间隙，确保元素之间有适当间距 */
  }
  
  .item-info {
    display: flex;
    align-items: center;
    flex: 1; /* 占据剩余空间 */
    min-width: 0; /* 允许内容截断 */
    overflow: hidden; /* 确保内容不会溢出 */
    margin-right: 8px; /* 添加与右侧元素的间距 */
  }
  
  .item-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; /* 使用flex: 1而不是width: 100%，确保标题能够占据可用空间 */
    font-size: 12px; // 从默认大小减少到12px，与NavigationPanels.scss保持一致
  }
  
  .item-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    font-size: 11px; // 从12px减少到11px，与NavigationPanels.scss保持一致
    color: var(--n-text-color-3);
    flex-shrink: 0; 
    transition: all 0.15s var(--n-bezier-ease-out); /* 从0.3s减少到0.15s，更快速 */
    text-align: right; 
    margin-left: auto; 
  }
  
  .word-count {
    font-size: 11px; // 从12px减少到11px，与NavigationPanels.scss保持一致
    color: var(--n-text-color-3);
    white-space: nowrap; // 防止换行
    text-align: right; /* 字数统计右对齐 */
    display: block; /* 确保块级显示 */
  }
  
  .meta-text {
    font-size: 11px; // 从12px减少到11px，与NavigationPanels.scss保持一致
    color: var(--n-text-color-3);
    white-space: nowrap; // 防止换行
    text-align: right; /* 元文本右对齐 */
    display: block; /* 确保块级显示 */
  }
  
  .item-actions {
    display: flex;
    gap: 2px; // 从4px减少到2px，更紧凑
    opacity: 0;
    transition: all 0.15s var(--n-bezier-ease-out); /* 从0.3s减少到0.15s，更快速 */
    flex-shrink: 0; // 防止缩小
    margin-left: 8px; /* 增加与左侧元素的间距 */
    position: absolute; /* 使用绝对定位，使其脱离文档流 */
    right: 12px; /* 定位到右侧 */
    transform: translateX(10px); /* 初始位置偏右，创建滑入效果 */
  }
  
  &:hover {
    .item-meta {
      opacity: 0 !important; // 隐藏时间/字数
      visibility: hidden !important; // 完全隐藏，不占位
    }
    
    .item-actions {
      opacity: 1 !important; // 显示操作图标
      visibility: visible !important; // 确保可见
      transform: translateX(0) !important; // 滑入到正确位置
    }
  }
  
  &.list-item-selected {
    .item-meta {
      opacity: 0 !important; // 选中时也隐藏时间/字数
      visibility: hidden !important; // 完全隐藏，不占位
    }
    
    .item-actions {
      opacity: 1 !important; // 选中时显示操作图标
      visibility: visible !important; // 确保可见
      transform: translateX(0) !important; // 滑入到正确位置
    }
  }
}

/* 列表项进入动画 */
@keyframes listItemEnter {
  0% {
    opacity: 0;
    transform: translateY(-5px); // 从-10px减少到-5px，更微妙
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Naive UI 列表项选中动画 */
@keyframes listItemSelect {
  0% {
    background-color: transparent;
    border-left-color: transparent;
  }
  50% {
    background-color: rgba(64, 158, 255, 0.2);
  }
  100% {
    background-color: rgba(64, 158, 255, 0.15);
    border-left-color: var(--n-primary-color, #18a058);
  }
}

/* 折叠面板内容区域动画 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item__content-wrapper),
.navigation-sidebar-component .sidebar-content 
:deep(.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-top: 0px;
  background-color: var(--n-card-color); /* 确保背景色与标题一致 */
  transition: all 0.15s var(--n-bezier-ease-out); /* 从0.3s减少到0.15s，更快速 */
  transform-origin: top; /* 设置变换原点为顶部 */
  overflow: hidden;
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

/* 折叠面板内容区域 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item__content-inner) {
  padding: 0;
  background-color: var(--n-card-color);
  overflow: hidden;
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
}

/* 折叠面板展开/收起动画 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item) {
  transition: all 0.15s var(--n-bezier-ease-out); /* 从0.3s减少到0.15s，更快速 */
  overflow: hidden; /* 确保内容不会溢出 */
}

/* 折叠面板展开/收起状态动画 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item.n-collapse-item--active),
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item:not(.n-collapse-item--active)) {
  transition: flex 0.15s var(--n-bezier-ease-out); /* 从0.3s减少到0.15s，更快速 */
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item.n-collapse-item--active) {
  flex: 1;
  animation: panelExpand 0.15s var(--n-bezier-ease-out) forwards; /* 从0.3s减少到0.15s，更快速 */
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item:not(.n-collapse-item--active)) {
  animation: panelCollapse 0.15s var(--n-bezier-ease-out) forwards; /* 从0.3s减少到0.15s，更快速 */
}

/* 面板展开动画 */
@keyframes panelExpand {
  0% {
    opacity: 0.9; // 从0.8增加到0.9，更微妙
    transform: scaleY(0.98); // 从0.95增加到0.98，更微妙
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* 面板收起动画 */
@keyframes panelCollapse {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
  100% {
    opacity: 0.9; // 从0.8增加到0.9，更微妙
    transform: scaleY(0.98); // 从0.95增加到0.98，更微妙
    transform-origin: top;
  }
}

/* 折叠箭头旋转动画 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item__header .n-collapse-item-arrow) {
  width: 14px; /* 减小图标尺寸，从16px减少到14px，与更小的头部高度匹配 */
  height: 14px;
  margin-right: 8px; /* 增加右边距 */
  color: var(--n-text-color-2); /* 使用次要文本颜色 */
  transition: transform 0.15s var(--n-bezier-ease-out), color 0.15s var(--n-bezier); /* 从0.3s减少到0.15s，更快速 */
}

/* 激活状态下的箭头旋转 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item.n-collapse-item--active .n-collapse-item__header .n-collapse-item-arrow) {
  transform: rotate(90deg); /* 展开时旋转90度 */
  color: var(--n-text-color-1); /* 激活状态使用主要文本颜色 */
}

/* 悬停状态下的箭头旋转预览 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item .n-collapse-item__header:hover .n-collapse-item-arrow) {
  color: var(--n-text-color-1); /* 悬停状态使用主要文本颜色 */
  transform: rotate(5deg); // 从15度减少到5度，更微妙
}

/* 激活状态悬停时的箭头旋转 */
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item.n-collapse-item--active .n-collapse-item__header:hover .n-collapse-item-arrow) {
  transform: rotate(90deg) scale(1.02); // 从1.1减少到1.02，更微妙
}

// 面板头部样式
.navigation-sidebar-component .sidebar-content :deep(.panel-header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex: 1; /* 占据剩余空间 */
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
  
  .panel-title {
    flex: 1;
    text-align: left;
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    font-size: 13px; // 从默认大小减少到13px，与NavigationPanels.scss保持一致
  }
  
  .panel-add-button {
    flex-shrink: 0;
    opacity: 0.7;
    transition: all 0.15s var(--n-bezier-ease-out); /* 从0.3s减少到0.15s，更快速 */
    margin-left: 8px; /* 添加左边距，与标题保持间距 */
    transform: scale(1); /* 初始大小 */
    box-shadow: none; /* 移除阴影，保持扁平化设计 */
    
    &:hover {
      opacity: 1;
      transform: scale(1.02); // 从1.05减少到1.02，更微妙
    }
  }
}

/* 折叠面板内容区域 */
.navigation-sidebar-component .sidebar-content :deep(.collapse-content) {
  background-color: var(--n-card-color);
  overflow: hidden;
  box-shadow: none; /* 移除阴影，保持扁平化设计 */
  
  .content-wrapper {
    overflow: hidden;
    box-shadow: none; /* 移除阴影，保持扁平化设计 */
  }
}

// 为CollapsiblePanel组件添加更高优先级的选中样式 - Naive UI
.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item .collapse-content .content-wrapper .n-list-item.n-list-item--selected) {
  background-color: #ff0000 !important; // 临时修改为大红色以便测试
  border-left: 3px solid var(--n-primary-color, #18a058) !important;
  padding-left: 7px !important;
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item .collapse-content .content-wrapper .n-list-item.n-list-item--selected .item-meta) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.navigation-sidebar-component .sidebar-content :deep(.n-collapse-item .collapse-content .content-wrapper .n-list-item.n-list-item--selected .item-actions) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}
